<template>

	<view class='container'>

		<view class='table'>
			<view class="tag">
				<text class='powNum tagPow'>数量</text>
				<text class='expireDate'>过期时间</text>
				<text class='source'>来源</text>
				<text class='status'>状态</text>
			</view>

			<view class='item'>
				<view class='rowStyle' v-for="(item,index) in powerListData" :key="index">
					<text class='powNum'>
						<text>{{item.configValue}}</text>
						<text class='decrib'>MB</text>
					</text>
					<text class='expireDate'>{{item.endDate}}</text>
					<text class='source'>{{item.sourceName}}</text>
					<text class='status'>{{item.statusName}}</text>
				</view>
			</view>
			<view class='more' @tap='loadMore'>{{bottomTitle}}</view>
		</view>
	</view>
</template>

<script>
	import api from "../../common/apis.js";
	import message from "../../common/message.js"
	import util from "../../common/util.js"
	export default {
		data() {
			return {
				pageSize: 20,
				pageNum: 0,
				powerListData: [],
				bottomTitle: '点击加载更多'
			}
		},
		onLoad: function(options) {
			this.gainPowerList(0);
		},
		onPullDownRefresh: function() {
			this.pageNum = 0
			this.gainPowerList(this.pageNum)
		},
		onReachBottom: function() {
			if (this.bottomTitle === '无更多数据') {
				return
			}
			this.loadMore()
		},
		methods: {
			loadMore() {
				if (this.bottomTitle === '无更多数据') {
					return
				}
				let temp = this.pageNum;
				temp += 1;
				this.pageNum = temp
				this.gainPowerList(this.pageNum)
			},
			gainPowerList(pageNum) {
				let token = uni.getStorageSync("authorization");
				uni.showLoading({
					title: '加载中',
				});
				uni.request({
					url: api.powerListApi + "?" + "page=" + pageNum + "&size=" + this.pageSize,
					method: "GET",
					header: {
						"Authorization": 'Bearer ' + token
					},
					success: res => {
						uni.hideLoading()
						uni.stopPullDownRefresh()
						
						if (res.statusCode == '200') {
							if (res.data.length == 0) {
								this.bottomTitle = '无更多数据'
								return
							}

							if (this.pageNum == 0) {
								this.powerListData = []
							}

							let temp = []
							this.powerListData.forEach(element => {
								temp.push(element)
							})

							res.data.forEach(element => {
								let time = element.endDate
								let space = time.indexOf(" ");
								let newString = time.slice(0, space);
								element.endDate = newString;
								temp.push(element)
							})

							this.powerListData = temp
						} else {
							util.errHandler(res)
						}
					}
				});
			}
		},
	}
</script>

<style>
	/* pages/power/power.wxss */

	.container {
		width: 100%;
		padding: 0;
		margin: 0;
	}

	.curPow {
		float: right;
	}

	.table {
		border-radius: 4px;
		text-align: left;
		padding-bottom: 10px;
	}

	.tag {
		height: 38px;
		display: flex;
		justify-content: space-around;
		-webkit-align-items: center;
		align-items: center;
		background: rgba(238, 238, 238, 1);
		padding-left: 10px;
		padding-right: 10px;
	}

	.rowStyle {
		display: flex;
		line-height: 38px;
		justify-content: space-around;
		border-bottom: 1px solid rgba(153, 153, 153, 0.3);
	}

	.item {
		padding: 0 10px;
	}

	.powNum {
		font-size: 12px;
		letter-spacing: 0.65px;
		text-align: left;
		width: 80px;
	}

	.source {
		width: 85px;
		text-align: center;
		font-size: 12px;
	}

	.status {
		width: 50px;
		text-align: right;
		font-size: 12px;
	}

	.expireDate {
		font-size: 12px;
		letter-spacing: 0.65px;
		width: 90px;
		text-align: center;
	}

	.decrib {
		font-size: 9px;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		margin-left: 3px;
	}

	.more {
		width: 100%;
		text-align: center;
		font-size: 9px;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		color: rgba(153, 153, 153, 1);
		margin: 0 auto;
		margin-top: 22px;
	}
</style>
